<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }



    .outer{
      width: 400px;
      /* height: 400px; */
      background: goldenrod;
      /* 加上边框就好了 */
      /* border: 1px solid red; */
      /* padding: 1px; */
      /* 最佳 */
      overflow: hidden;
    }

    .inner1{
      width: 100px;
      height: 100px;
      background: rebeccapurple;
      /* 有问题 */
      margin-top: 50px;
    }

    .inner2{
      width: 100px;
      height: 100px;
      background: greenyellow;
      margin-bottom: 50px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner1"></div>
    <div class="inner2"></div>
  </div>
  <div>上面有问题</div>
</body>
</html>

<!-- 
margin塌陷问题可以通过以下几种方法解决：
1.为父元素设置border：为外层添加border后，父盒子与子盒子不再是真正意义上的贴合，从而可以避免margin塌陷。
如果需要保持视觉上的无边框效果，可以设置透明边框，例如border: 1px solid transparent;。

2.为父元素添加overflow:hidden：通过禁止超出，可以避免margin重叠导致的塌陷。
这种方法在实际应用中较为常见，且通常不会对页面布局造成太大影响。

3.为父元素设定padding值：通过增加内边距，可以使得父元素与子元素之间的距离增加，从而避免margin塌陷。
种方法需要根据具体的设计需求来调整padding的大小。

4.为父元素添加position:fixed或position:absolute：将父元素固定定位或绝对定位到页面，可以避免与其他元素重叠导致的margin塌陷。
但这种方法可能会改变父元素在页面中的位置，因此需要谨慎使用。

5.为父元素添加display:table：将父元素设置为表格元素，可以改变其渲染规则，从而避免margin塌陷。
但这种方法可能会使得父元素的布局特性发生变化，需要根据具体情况来选择。

6.利用伪元素给父元素前面添加一个空元素：通过添加一个空元素并设置相应的样式，例如display: table;和content: '';，可以解决父元素的margin塌陷问题。
这种方法不会对页面内容造成影响，但可能会增加CSS的复杂性。

7.在子元素前添加一个空白元素：与利用伪元素类似，直接在HTML结构中添加一个空白的div元素，也可以达到解决margin塌陷的效果。
但这种方法会增加HTML结构的复杂性。

-->